<!-- 测试自定义组件v-model -->
<template>
  <div class="model" v-show="show">
    是否显示
    <button @click="change">change</button>
  </div>
</template>

<script>
  export default {
    name: "Model",
    // 使用这个model进行实现v-model
    // prop绑定外层v-model绑定的参数，可自定义该参数名，但props需要和这边保持一致
    // event是触发v-model绑定的参数的值的变化的方法，可以随意命名，调用时：this.$emit('showChange', 改动后的值)
    model: {
      prop: 'show',
      event: 'changeShow'
    },
    props: {
      show: Boolean
    },
    methods: {
      change() {
        this.$emit('changeShow', !this.show)
      }
    }
  }
</script>

<style scoped>

</style>
